.component-button {
    border: none;
    background-color: var(--primary-color-8_5);
    color: var(--primary-text-color-10);
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.4s;

    &:hover {
        background-color: var(--primary-color-10);
    }
    &.danger {
        background-color: #dd514c;

        &:hover {
            background-color: #d7342e;
        }
    }
}

.rc-dialog {
    top: 45% !important;
    transform: translateY(-50%) !important;
}
.rc-dialog-title {
    font-size: 16px !important;
}
.rc-dialog-wrap {
    overflow: hidden !important;
}
.rc-dialog-close {
    top: 0 !important;
    right: 10px !important;

    .rc-dialog-close-x {
        font-size: 32px !important;
    }
}

.component-iconButton {
    text-align: center;
    color: rgba(165, 181, 192, 1);
    cursor: pointer;

    &:hover {
        color: rgba(247, 247, 247, 1);
    }
}

.component-input {
    position: relative;

    input {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        padding: 0 34px 0 8px;
        font-size: 14px;
        color: #333;
        box-sizing: border-box;

        &:focus {
            border-color: var(--primary-color-10);
        }
    }
    .component-iconButton {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 5px;

        &:hover {
            color: var(--primary-color-10);
        }
    }
}

.rc-select-dropdown {
    z-index: 1500 !important;
}

.rc-notification {
    top: 5px !important;
    z-index: 1100 !important;
}
.rc-notification-notice {
    height: 50px !important;
}

.component-message {
    height: 100%;
    display: flex;
    align-items: center;
    margin-top: 1px;

    .iconfont {
        font-size: 22px;

        &.icon-success {
            color: green;
        }
        &.icon-error {
            color: #d82e2e;
        }
        &.icon-warning {
            color: orange;
        }
        &.icon-info {
            color: #2773ef;
        }
    }
    & > span {
        margin-left: 8px;
        font-size: 16px;
    }
}

.rc-tooltip {
    display: inline-block !important;
}
.rc-tooltip-hidden {
    display: none !important;
}
.rc-tooltip-inner {
    span {
        color: #f1f1f1 !important;
    }
}